<button class="btn btn-dark" (click)="toTopOfScreen()" id="toTopButton" title="Go to top">
    <img class="img-fluid cardIcon" id="topBtn" src="{{'assets/images/btn_arrow.png'}}">
</button>
<div *ngIf="isLoaded == false" class="loader">
    <div class="spinner-border text-light" role="status">
        <span class="sr-only mx-auto">Loading...</span>
    </div>
</div>
<div class="row justify-content-center p-2">
    <div class="col-12 col-md-10 my-2 bg-dark">
        <mat-tab-group mat-align-tabs="center" animationDuration="0ms">
            <mat-tab label="{{'VISION-HISTORY.CN-SERVER' | translate}}">
                <table class="table table-sm table-dark text-center">
                    <thead>
                        <tr>
                            <th scope="col">
                                <span class="sort-header" (click)="toggleSortHeader(0)">
                                    {{'VISION-HISTORY.START-DATE' | translate}}
                                    <mat-icon aria-hidden="false">{{arrows[tableSortArrow[0]]}}</mat-icon>
                                </span>
                            </th>
                            <th scope="col">
                                <span class="sort-header" (click)="toggleSortHeader(1)">
                                    {{'VISION-HISTORY.END-DATE' | translate}}
                                    <mat-icon aria-hidden="false">{{arrows[tableSortArrow[1]]}}</mat-icon>
                                </span>
                            </th>
                            <th scope="col">{{'VISION-HISTORY.POOL-TYPE' | translate}}</th>
                            <th scope="col">{{'VISION-HISTORY.RATE-UP-CARD' | translate}}</th>
                            <th scope="col">{{'VISION-HISTORY.ANNOUNCEMENT' | translate}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="smallFont" *ngFor="let p of cnPool">
                            <td class="table-text">{{p.startDate}}</td>
                            <td class="table-text">{{p.endDate}}</td>
                            <td class="table-text">{{'KEYWORD.' + p.type | translate}}</td>
                            <td class="table-text">
                                <!-- <span *ngFor="let c of p.cards"> -->
                                <span *ngFor="let c of p.cardObj">
                                    <a [routerLink]="['/card-value/']" [queryParams]="{id: c._id}" target="_blank">
                                        <img class="img-fluid cardIcon"
                                            src="{{imgURL + c.character + '/' + c.ref + '.webp'}}" title="{{c.n}}">
                                    </a>
                                </span>
                            </td>
                            <td class="table-text">
                                <a *ngIf="p.bid" href="{{weibo + p.bid}}" target="_blank">
                                    <img class="img-fluid" style="width: 24px;" src="assets/images/weibo.png">
                                </a>
                                <a *ngIf="p.bv" href="{{bilibili + p.bv}}" target="_blank">
                                    <img class="img-fluid" style="width: 24px;" src="assets/images/bilibili.png">
                                </a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </mat-tab>
            <mat-tab label="{{'VISION-HISTORY.GLOBAL-SERVER' | translate}}">
                <table class="table table-sm table-dark text-center">
                    <thead>
                        <tr>
                            <th scope="col">
                                <span class="sort-header" (click)="toggleSortHeader(0)">
                                    {{'VISION-HISTORY.START-DATE' | translate}}
                                    <mat-icon aria-hidden="false">{{arrows[tableSortArrow[0]]}}</mat-icon>
                                </span>
                            </th>
                            <th scope="col">
                                <span class="sort-header" (click)="toggleSortHeader(1)">
                                    {{'VISION-HISTORY.END-DATE' | translate}}
                                    <mat-icon aria-hidden="false">{{arrows[tableSortArrow[1]]}}</mat-icon>
                                </span>
                            </th>
                            <th scope="col">{{'VISION-HISTORY.POOL-TYPE' | translate}}</th>
                            <th scope="col">{{'VISION-HISTORY.RATE-UP-CARD' | translate}}</th>
                            <th scope="col">{{'VISION-HISTORY.ANNOUNCEMENT' | translate}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="smallFont" *ngFor="let p of globalPool">
                            <td class="table-text">{{p.startDate}}</td>
                            <td class="table-text">{{p.endDate}}</td>
                            <td class="table-text">{{'KEYWORD.' + p.type | translate}}</td>
                            <td class="table-text">
                                <!-- <span *ngFor="let c of p.cards"> -->
                                <span *ngFor="let c of p.cardObj">
                                    <a [routerLink]="['/card-value/']" [queryParams]="{id: c._id}" target="_blank">
                                        <img class="img-fluid cardIcon"
                                            src="{{imgURL + c.character + '/' + c.ref + '.webp'}}" title="{{c.n}}">
                                    </a>
                                </span>
                            </td>
                            <td class="table-text">
                                <a *ngIf="p.twitter" href="{{twitter + p.twitter}}" target="_blank">
                                    <img class="img-fluid" style="width: 24px;" src="assets/images/twitter.png">
                                </a>
                                <a *ngIf="p.youtube" href="{{p.youtube}}" target="_blank">
                                    <img class="img-fluid" style="width: 24px;" src="assets/images/youtube.png">
                                </a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </mat-tab>
        </mat-tab-group>

    </div>
</div>